<template>
	<view>
		<view class="bg">
			<view class="box">
				<view class="upper">
					<view class="user">
						<view class="avatur-container">
							<image :src="peopleinfo.avatur"></image>
						</view>
						<view class="nickname">
							{{peopleinfo.name}}
							<text style="color: pink;" v-if="peopleinfo.gender===0">♀</text>
							<text style="color: aqua;" v-else>♂</text>
						</view>
					</view>
					<view @click="goEdit()" class="edit">
						编辑资料
					</view>
				</view>
				<view class="lower">
					<view class="grid">
						<view class="num">
							{{sum}}
						</view>
						总订单数
					</view>
					<view class="grid">
						<view class="num">
							{{monthnum}}
						</view>
						本月订单数
					</view>
					<view class="grid">
						<view class="num">
							{{monthprice}}
						</view>
						本月金额
					</view>
				</view>
			</view>
			<view @click="goPingjia()" class="gongneng">
				<Cell title="查看评价" content=""></Cell>
			</view>
		</view>
		<view @click="logout()" class="logout">退出登录</view>
	</view>
</template>

<script lang="ts" setup>
	import {ref,reactive} from "vue"
	import {onShow} from "@dcloudio/uni-app"
	import Cell from "./components/cell.vue"
	import http from "@/utils/request.js"
	onShow(()=>{
		let obj=uni.getStorageSync('peopleinfo')
		if(!getApp().globalData.istabbar){
			getApp().globalData.istabbar=true
			uni.setTabBarBadge({
				index:1,
				text:String(getApp().globalData.noreadnum)
			})
		}
		if(obj)peopleinfo.value=obj;
		getnum()
	})
	
	let peopleinfo=ref({})
	let sum=ref(0)
	let monthnum=ref(0)
	let monthprice=ref(0)
	
	function getnum(){
		let response=http.get('/order/getordernum',{
			people_id:peopleinfo.value.people_id
		})
		response.then(res=>{
			if(res.data.code===200){
				sum.value=res.data.data.sum
				monthnum.value=res.data.data.monthnum
				monthprice.value=res.data.data.monthprice
			}
		})
	}
	function goEdit(){
		uni.navigateTo({
			url:"/pages/user/edit/index"
		})
	}
	function goPingjia(){
		uni.navigateTo({
			url:"/pages/user/pingjia/index"
		})
	}
	function logout(){
		uni.removeStorageSync('peopleinfo')
		uni.redirectTo({
			url:'/pages/login/index'
		})
	}
</script>

<style lang="scss">
	.bg{
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		
		.box{
			width: 90%;
			box-sizing: border-box;
			background-color: #fff;
			padding: 20rpx;
			border-radius: 30rpx 20rpx;
			box-shadow: 0 12rpx 64rpx -14rpx rgba(0, 0, 0, 0.25);
			
			.upper{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 40rpx;
			}
			
			.lower{
				display: grid;
				margin-bottom: 20rpx;
				grid-template-columns: 33% 33% 33%;
				
				.grid{
					display: flex;
					justify-content: space-between;
					align-items: center;
					flex-direction: column;
					
					.num{
						font-size: 36rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 100%;
						word-break: break-all;
						font-weight: 600;
						margin-bottom: 20rpx;
					}
				}
			}
			
			.user{
				display: flex;
				align-items: center;
				letter-spacing: 0.1em;
				
				.avatur-container{
					margin-right: 25rpx;
					image{
						border-radius: 50rpx;
						background-color: #efefef;
						width: 150rpx;
						height: 150rpx;
					}
				}
						
					.nickname{
						font-size: 34rpx;
						font-weight: 600;
						margin-bottom: 20rpx;
					}
			}
			
			.edit{
				display: flex;
				align-items: center;
				justify-content: center;
				border:1rpx solid #676558;
				font-size: 28rpx;
				border-radius: 40rpx;
				padding: 10rpx 25rpx;
				color:#6d674f;
				letter-spacing: 0.1em;
			}
		}
		
		.gongneng{
			margin-top: 40rpx;
			width: 100%;
		}
	}
	.logout{
		color:#666;
		position: absolute;
		font-size: 28rpx;
		left: 50%;
		transform: translate(-50%);
		bottom: 80rpx;
	}
</style>
